window.onload = function () {
    function initCharts (data){
        $.ajax({
            type: "POST",
            url: "/analyze/mortgageRateTopTenData",
            data:data,
            success: function (msg){
                var myChart4 = echarts.init($('#myChart4').get(0));
                var allData = msg.mortgageRateList,
                    quantity = [],
                    communityName = [];

                var max = data.max;
                var length = msg.mortgageRateList.length
                if (max > length) {
                    toastr.warning('注意：小区数量不足！');
                }

                allData.forEach(function(data,index){
                    quantity[index] = data.value.toFixed(2);
                    communityName[index] = data.communityName;
                });
                option4 = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    title: {
                        // subtext: '单位：%',
                        // textStyle: {
                        //     color: '#333'
                        // }
                    },
                    legend: {
                        data: communityName
                    },
                    grid: {
                        //left: '0.5%',
                        top: '10%',
                        bottom: '25%',
                        // right:'0.5%',
                        //containLabel: true
                    },
                    yAxis:  {
                        type: 'value',
                        name: '单位(%)',
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            formatter:function(value)
                            {
                                return value.split("").join("\n");
                            }
                    },
                        data : communityName
                    },
                    series: [
                        {
                            name:'动态抵押率',
                            type:'bar',
                            data:quantity,
                            itemStyle: {
                                normal: {
                                    color: 'rgba(98,203,49,0.7)',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}'
                                    }
                                }
                            }
                        }
                    ]
                };
                // if(communityName.length>20){
                //     option4.xAxis.axisLabel. rotate = 270
                // }
                myChart4.setOption(option4);
                window.onresize = function () {
                    myChart4.resize()
                };
            }
        })};
    var dataMax = {
        max: 10
    };
    initCharts(dataMax);
    $('#searchData').click(function(){
        var inputData,
            citys = $('#city').val(),
            districts = $('#district').val(),
            num = $("#numSelect").val();
            inputData = {
                city:citys,
                district:districts,
                max: num
            };

        initCharts(inputData)
    });
    $("#numSelect").change(function () {
        var num = $("#numSelect").val();
        citys = $('#city').val(),
        districts = $('#district').val();
        var dataMax = {
            city:citys,
            district:districts,
            max: num
        };
        initCharts(dataMax);
    })
}